// 游戏界面模块
const GameView = {
  // 渲染游戏界面
  render: function(ctx, width, height, gameState, gameElements) {
    // 计算比例因子 - 增加20%显示大小
    const scaleFactor = (Math.min(width, height) / 600) * 1.2; // 基准尺寸为600
    
    // 绘制背景
    ctx.fillStyle = '#ECF0F1';
    ctx.fillRect(0, 0, width, height);
    
    // 绘制信息区域背景
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.beginPath();
    ctx.moveTo(30 * scaleFactor, 20 * scaleFactor);
    ctx.lineTo(width - 50 * scaleFactor, 20 * scaleFactor);
    ctx.quadraticCurveTo(width - 40 * scaleFactor, 20 * scaleFactor, width - 40 * scaleFactor, 30 * scaleFactor);
    ctx.lineTo(width - 40 * scaleFactor, 90 * scaleFactor);
    ctx.quadraticCurveTo(width - 40 * scaleFactor, 100 * scaleFactor, width - 50 * scaleFactor, 100 * scaleFactor);
    ctx.lineTo(30 * scaleFactor, 100 * scaleFactor);
    ctx.quadraticCurveTo(20 * scaleFactor, 100 * scaleFactor, 20 * scaleFactor, 90 * scaleFactor);
    ctx.lineTo(20 * scaleFactor, 30 * scaleFactor);
    ctx.quadraticCurveTo(20 * scaleFactor, 20 * scaleFactor, 30 * scaleFactor, 20 * scaleFactor);
    ctx.closePath();
    ctx.fill();
    
    // 绘制分数
    ctx.fillStyle = '#333';
    ctx.font = `bold ${24 * scaleFactor}px Arial`;
    ctx.textAlign = 'right';
    ctx.fillText(`分数: ${gameState.score}`, width - 40 * scaleFactor, 45 * scaleFactor);
    
    // 绘制等级
    ctx.fillStyle = '#666';
    ctx.font = `${16 * scaleFactor}px Arial`;
    ctx.textAlign = 'right';
    ctx.fillText(`等级: ${gameState.level}`, width - 40 * scaleFactor, 70 * scaleFactor);
    
    // 绘制难度
    ctx.fillStyle = '#666';
    ctx.font = `${16 * scaleFactor}px Arial`;
    ctx.textAlign = 'left';
    let difficultyText = '';
    switch(gameState.difficulty) {
      case 'slow': difficultyText = '难度: 慢速'; break;
      case 'medium': difficultyText = '难度: 中速'; break;
      case 'fast': difficultyText = '难度: 快速'; break;
    }
    ctx.fillText(difficultyText, 40 * scaleFactor, 70 * scaleFactor);
    
    // 绘制玩家球
    const player = gameElements.player;
    ctx.beginPath();
    ctx.arc(player.x, player.y, player.radius * scaleFactor, 0, Math.PI * 2);
    ctx.fillStyle = player.color;
    ctx.fill();
    // 添加发光效果
    ctx.shadowColor = player.color;
    ctx.shadowBlur = 10 * scaleFactor;
    ctx.beginPath();
    ctx.arc(player.x, player.y, player.radius * scaleFactor, 0, Math.PI * 2);
    ctx.fill();
    ctx.shadowBlur = 0;
    
    // 绘制敌人球
    for (let enemy of gameElements.enemies) {
      ctx.beginPath();
      ctx.arc(enemy.x, enemy.y, enemy.radius * scaleFactor, 0, Math.PI * 2);
      ctx.fillStyle = enemy.color;
      ctx.fill();
      // 敌人球添加边框
      ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
      ctx.lineWidth = 2 * scaleFactor;
      ctx.stroke();
    }
    
    // 只有游戏未结束时显示暂停按钮
    if (!gameState.gameOver) {
      // 绘制暂停按钮
      const pauseBtnWidth = 80 * scaleFactor;
      const pauseBtnHeight = 30 * scaleFactor;
      const pauseBtnX = width / 2 - pauseBtnWidth / 2;
      const pauseBtnY = height - 50 * scaleFactor;
      
      ctx.beginPath();
      ctx.arc(pauseBtnX + pauseBtnWidth / 2, pauseBtnY + pauseBtnHeight / 2, pauseBtnHeight / 2, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2 * scaleFactor;
      ctx.stroke();
      
      ctx.fillStyle = '#333';
      ctx.font = `${14 * scaleFactor}px Arial`;
      ctx.textAlign = 'center';
      ctx.fillText(gameState.isRunning ? '||' : '▶', width / 2, pauseBtnY + pauseBtnHeight / 2 + 5 * scaleFactor);
    }
    
    // 绘制返回主菜单按钮
    const menuBtnWidth = 120 * scaleFactor;
    const menuBtnHeight = 30 * scaleFactor;
    const menuBtnX = width - menuBtnWidth - 20 * scaleFactor;
    const menuBtnY = height - 50 * scaleFactor;
    const menuBtnRadius = 15 * scaleFactor;
    
    ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
    ctx.beginPath();
    ctx.moveTo(menuBtnX + menuBtnRadius, menuBtnY);
    ctx.lineTo(menuBtnX + menuBtnWidth - menuBtnRadius, menuBtnY);
    ctx.quadraticCurveTo(menuBtnX + menuBtnWidth, menuBtnY, menuBtnX + menuBtnWidth, menuBtnY + menuBtnRadius);
    ctx.lineTo(menuBtnX + menuBtnWidth, menuBtnY + menuBtnHeight - menuBtnRadius);
    ctx.quadraticCurveTo(menuBtnX + menuBtnWidth, menuBtnY + menuBtnHeight, menuBtnX + menuBtnWidth - menuBtnRadius, menuBtnY + menuBtnHeight);
    ctx.lineTo(menuBtnX + menuBtnRadius, menuBtnY + menuBtnHeight);
    ctx.quadraticCurveTo(menuBtnX, menuBtnY + menuBtnHeight, menuBtnX, menuBtnY + menuBtnHeight - menuBtnRadius);
    ctx.lineTo(menuBtnX, menuBtnY + menuBtnRadius);
    ctx.quadraticCurveTo(menuBtnX, menuBtnY, menuBtnX + menuBtnRadius, menuBtnY);
    ctx.closePath();
    ctx.fill();
    ctx.strokeStyle = '#4A90E2';
    ctx.lineWidth = 2 * scaleFactor;
    ctx.stroke();
    
    ctx.fillStyle = '#4A90E2';
    ctx.font = `${14 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('返回', menuBtnX + menuBtnWidth / 2, menuBtnY + menuBtnHeight / 2 + 5 * scaleFactor);
    
    // 显示分数提示弹窗
    if (gameState.showScorePopup) {
      // 绘制半透明背景
      ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
      ctx.fillRect(0, 0, width, height);
      
      // 绘制弹窗背景
      const popupWidth = 280 * scaleFactor;
      const popupHeight = 200 * scaleFactor;
      const popupX = width / 2 - popupWidth / 2;
      const popupY = height / 2 - popupHeight / 2;
      const popupRadius = 20 * scaleFactor;
      
      ctx.fillStyle = '#fff';
    ctx.beginPath();
    ctx.moveTo(popupX + popupRadius, popupY);
    ctx.lineTo(popupX + popupWidth - popupRadius, popupY);
    ctx.quadraticCurveTo(popupX + popupWidth, popupY, popupX + popupWidth, popupY + popupRadius);
    ctx.lineTo(popupX + popupWidth, popupY + popupHeight - popupRadius);
    ctx.quadraticCurveTo(popupX + popupWidth, popupY + popupHeight, popupX + popupWidth - popupRadius, popupY + popupHeight);
    ctx.lineTo(popupX + popupRadius, popupY + popupHeight);
    ctx.quadraticCurveTo(popupX, popupY + popupHeight, popupX, popupY + popupHeight - popupRadius);
    ctx.lineTo(popupX, popupY + popupRadius);
    ctx.quadraticCurveTo(popupX, popupY, popupX + popupRadius, popupY);
    ctx.closePath();
    ctx.fill();
      
      // 绘制关闭按钮
      const closeBtnSize = 24 * scaleFactor;
      const closeBtnX = popupX + popupWidth - closeBtnSize - 15 * scaleFactor;
      const closeBtnY = popupY + 15 * scaleFactor;
      
      ctx.beginPath();
      ctx.arc(closeBtnX, closeBtnY, closeBtnSize / 2, 0, Math.PI * 2);
      ctx.fillStyle = '#f44336';
      ctx.fill();
      
      ctx.fillStyle = '#fff';
      ctx.font = `bold ${16 * scaleFactor}px Arial`;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('✕', closeBtnX, closeBtnY);
      
      // 绘制标题
      ctx.fillStyle = '#333';
      ctx.font = `bold ${24 * scaleFactor}px Arial`;
      ctx.textAlign = 'center';
      ctx.fillText('游戏结束', width / 2, popupY + 50 * scaleFactor);
      
      // 绘制分数信息
      ctx.fillStyle = '#555';
      ctx.font = `${20 * scaleFactor}px Arial`;
      ctx.fillText(`最终分数: ${gameState.score}`, width / 2, popupY + 90 * scaleFactor);
      
      // 如果是新纪录，显示恭喜信息
      if (gameState.score === gameState.highScore && gameState.score > 0) {
        ctx.fillStyle = '#E74C3C';
        ctx.font = `bold ${18 * scaleFactor}px Arial`;
        ctx.fillText('🎉 恭喜！新纪录！', width / 2, popupY + 120 * scaleFactor);
      } else {
        ctx.fillStyle = '#666';
        ctx.font = `${16 * scaleFactor}px Arial`;
        ctx.fillText(`最高分: ${gameState.highScore}`, width / 2, popupY + 120 * scaleFactor);
      }
      
      // 绘制按钮提示
      ctx.fillStyle = '#999';
      ctx.font = `${14 * scaleFactor}px Arial`;
      ctx.fillText('点击关闭按钮或返回按钮返回主界面', width / 2, popupY + 150 * scaleFactor);
    }
    
    // 如果游戏结束但弹窗已关闭，显示简单的结束覆盖层
    if (gameState.gameOver && !gameState.showScorePopup) {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
      ctx.fillRect(0, 0, width, height);
      
      // 绘制游戏结束文字
      ctx.fillStyle = '#fff';
      ctx.font = `${30 * scaleFactor}px Arial`;
      ctx.textAlign = 'center';
      ctx.fillText('游戏结束', width / 2, height / 2 - 30 * scaleFactor);
      
      // 绘制分数
      ctx.font = `${24 * scaleFactor}px Arial`;
      ctx.fillText(`最终分数: ${gameState.score}`, width / 2, height / 2);
    }
  },
  
  // 检查按钮点击
  checkButtonClick: function(touchX, touchY, width, height, gameState) {
    // 计算比例因子 - 增加20%显示大小
    const scaleFactor = (Math.min(width, height) / 600) * 1.2; // 基准尺寸为600
    
    // 游戏结束弹窗显示时，检查是否点击了关闭按钮
    if (gameState.showScorePopup) {
      // 关闭按钮检测
      const popupWidth = 280 * scaleFactor;
      const popupHeight = 200 * scaleFactor;
      const popupX = width / 2 - popupWidth / 2;
      const popupY = height / 2 - popupHeight / 2;
      const closeBtnSize = 24 * scaleFactor;
      const closeBtnX = popupX + popupWidth - closeBtnSize - 15 * scaleFactor;
      const closeBtnY = popupY + 15 * scaleFactor;
      
      const distance = Math.sqrt((touchX - closeBtnX) ** 2 + (touchY - closeBtnY) ** 2);
      if (distance <= closeBtnSize / 2) {
        return 'closePopup';
      }
      
      // 点击弹窗内容区域不关闭弹窗，只有点击关闭按钮才关闭
      if (!(touchX >= popupX && touchX <= popupX + popupWidth && 
          touchY >= popupY && touchY <= popupY + popupHeight)) {
        return 'closePopup';
      }
      
      return null; // 点击弹窗内容区域不执行任何操作
    }
    
    // 暂停按钮
    if (!gameState.gameOver) {
      const pauseBtnWidth = 80 * scaleFactor;
      const pauseBtnHeight = 30 * scaleFactor;
      const pauseBtnX = width / 2 - pauseBtnWidth / 2;
      const pauseBtnY = height - 50 * scaleFactor;
      
      // 因为是圆形按钮，检查是否在圆形内
      const centerX = pauseBtnX + pauseBtnWidth / 2;
      const centerY = pauseBtnY + pauseBtnHeight / 2;
      const radius = pauseBtnHeight / 2;
      const distance = Math.sqrt((touchX - centerX) ** 2 + (touchY - centerY) ** 2);
      
      if (distance <= radius) {
        return gameState.isRunning ? 'pause' : 'resume';
      }
    }
    
    // 返回主菜单按钮
    const menuBtnWidth = 120 * scaleFactor;
    const menuBtnHeight = 30 * scaleFactor;
    const menuBtnX = width - menuBtnWidth - 20 * scaleFactor;
    const menuBtnY = height - 50 * scaleFactor;
    
    if (touchX >= menuBtnX && touchX <= menuBtnX + menuBtnWidth && 
        touchY >= menuBtnY && touchY <= menuBtnY + menuBtnHeight) {
      return 'menu';
    }
    
    return null;
  }
};

module.exports = GameView;